<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=yes" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>门诊服务</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<link rel="stylesheet" href="css/doctor.css" />
		<style type="text/css">
			.van-row{
				height: 25px;
				line-height: 25px;
			}
			.van-col{
				text-align: center;
			}
			.van-cell {
				padding-top: 0;
			}
			.van-col--19 {
				line-height: 35px;
			}
		</style>
	</head>

	<body>
		<div id='app' v-cloak>
			<div class="id_container">
				<div class="mm_top">
					<div class="doctor_left_title" style="margin-top: 0;">
						<span class="doctor_left_title_border"></span>
						<span class="doctor_left_title_name">门诊排期</span>
					</div>
					<div class="opc_datepicker">
						<van-cell @click="showPopup" is-link arrow-direction='down'>{{currentDate}}</van-cell>
						<van-popup v-model:show="show" position="bottom" :style="{ height: '45%' }">
							<van-datetime-picker
							v-model="currentDate"
							type="year-month"
							:min-date="mindate"
							:max-date="maxdate"
							:formatter="formatter"
							 @cancel="show = false"
							 @change='onchange'
							 @confirm="onConfirm"
						/>
						</van-popup>
					</div>
				</div>
				<div class="doctor_box schedual_list" v-if="noopc==1">
					<van-row class='opc_list_title'>
						<van-col span="6">日期</van-col>
						<van-col span="3">人数</van-col>
						<van-col span="9">患者</van-col>
						<van-col span="6">机构</van-col>

					</van-row>
					<div class="opc_list" v-for='item in detail' >
						<van-row class='opc_list_item' v-if="item.status==1">
							<van-col span="6">
								<p>{{item.date}}</p>
								<span v-if="now==item.date" style="color: #E22E30;">(今日)</span>
							</van-col>
							<van-col span="18">待出诊</van-col>
						</van-row>
						<van-row class='opc_list_item' v-if="item.status==2" @click='linkToList(item.queryDate)'>
							<van-col span="6">
								<p>{{item.date}}</p>
								<span v-if="now==item.date" style="color: #E22E30;">(今日)</span>
							</van-col>
							<van-col span="3">{{item.count}}</van-col>
							<van-col span="9">
								<p v-for="item1 in item.patientFlupInfoList" :key="item1">
									<span v-if='item1.name.length>5'>{{item1.name.substring(0,5)}}... </span>
									<span v-if='item1.name.length<=5'>{{item1.name}}</span>
									<span style="margin: 0 5px;" v-if="item1.sex==1">男</span>
									<span style="margin: 0 5px;" v-if="item1.sex==2">女</span>
									{{item1.age}} </p>
							</van-col>
							<van-col span="6">
								<p v-for="item1 in item.patientFlupInfoList" :key="item1">{{item1.organization}}</p>
							</van-col>
						</van-row>
						<van-row class='opc_list_item' v-if="item.status==3" @click='linkToList(item.queryDate)'>
							<van-col span="6">
								<p>{{item.date}}</p>
								<span v-if="now==item.date" style="color: #E22E30;">(今日)</span>
							</van-col>
							<van-col span="18">未出诊</van-col>
						</van-row>
					</div>
				</div>

				<van-empty v-if="noopc==2"
					class="custom-image"
					image="img/blank_pic.png"
					description="暂未设置门诊服务"
					style='margin-top:40%'
				/>


			</div>
			<link-index></link-index>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../common/js/url.min.js"></script>
	<script src="../base.js"></script>
	
	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
			getNow
		} from "../common/js/api/vue3-axios-utils.js";

		import { linkIndex } from "../common/js/template/linkIndex.js"

		const PatientData = {
			data() {
				return {
					url: {
						getopc:'/flup/list',
					},
					doctorId:'',
					detail:{},
					serviceContent:'',
					mindate:new Date(2020,0,1),
					maxdate:new Date(2025,0,1),
					currentDate:new Date().getFullYear() +'年' +(Number(new Date().getMonth()) + 1) +'月',
					show:false,
					now:'',
					noopc:1
				};
			},
			created() {
				this.doctorId = url('?id')
				this.init()
			},
			methods: {
				async init () {
					this.currentDateValue = new Date().getFullYear() +'-' +(Number(new Date().getMonth()) + 1) 
					console.log('currentDateValue',this.currentDateValue)
	                await this.handleGetOPC();
	           	},
				handleGetOPC(){
					postAction(spliceUrl(this.url.getopc),{doctorId:this.doctorId,queryDate:this.currentDateValue}).then((res) => {
						res = res.data
						console.log('handleGetOPC',res)
						if(res.success){
							if(res.result){
								this.noopc = 1
								this.detail = res.result
								this.now = getNow(Number(new Date().getMonth()) + 1) +'月'+getNow(new Date().getDate())+'日'
							}else{
								this.noopc = 2
								this.detail = {}
							}

						}
					})
				},
				formatter(type, val) {
			      if (type === 'year') {
			        return `${val}年`;
			      } else if (type === 'month') {
			        return `${val}月`
			      }
			      return val;
			    },
			    showPopup() {
	                this.show = true
	            },
	            onConfirm(value){
	            		this.currentDate =value.getFullYear() +'年' +(Number(value.getMonth()) + 1) +'月'
	            		this.currentDateValue = value.getFullYear() +'-' +(Number(value.getMonth()) + 1)
	            		this.handleGetOPC()
	            		console.log('111',this.currentDate)
	            		this.show = false
	            },
	            onchange(value){
	            		this.currentDate =value.getFullYear() +'年' +(Number(value.getMonth()) + 1) +'月'
	            		this.currentDateValue = value.getFullYear() +'-' +(Number(value.getMonth()) + 1)
	            		console.log('111',this.currentDate)

	            },
	            linkToList(id){
	            		window.location.href = './opcList.html?id='+this.doctorId+'&date='+id
	            }
			},
			components:{
				linkIndex:linkIndex,
			}
		};

		const app = Vue.createApp(PatientData);

		app.use(vant);

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload);

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount("#app");
	</script>

</html>

